<!--
* description: 模板-单网格
* author: zxuan
* createdDate: 2019-09-12
* update: tfy 2019-10-16
* update: dxuem 2019-11-21  emitCode() 接收弹窗返回
* logs:
*
-->
<template>
  <section class="filter-params-e3s">
    <div
      class="filter-container filter-button"
      style="background-color:white;margin-top:-1px"
      ref="searcheHeight"
    >
      <el-row style="padding: 5px 20px;">
        <el-button
          :style="comp.isShow?'display:none;':'display:block;float:left'"
          v-for="comp in tableButtons"
          :icon="getIcon(comp)"
          :key="comp.compKey"
          :type="comp.type"
          @click="comp.clickEvent"
          @keyup.enter="comp.clickEvent"
        >{{comp.text}}</el-button>
        <span style="display:block;float:left">{{searchResult}}</span>
        <el-col v-show="tableComponents.length<=4?!toggleParam:toggleParam" style="width: 40%;float: right;max-width: 450px;">
          <el-col :span="2" class="moreBtn" style="width:60%" v-if="isShowMoreBtn">
            <el-button
              style="float:right;margin-left:10px;width:50px"
              v-for="comp in tableButtonsRight.length>0?tableButtonsRight:tableButton1"
              :icon="comp.icon"
              :key="comp.compKey"
              :type="comp.type"
              @click="comp.clickEvent"
            >{{comp.text}}</el-button>
          </el-col>
          <el-button
            style="float:right;width:50px"
            icon="el-icon-caret-top"
            @click="changeToggleParam"
            class
          ></el-button>
        </el-col>
        <el-col v-show="tableComponents.length<=4?toggleParam:!toggleParam" style="width:50px;float:right;">
          <el-col :span="2" class="moreBtn" style="float:right" v-if="isShowMoreBtn">
            <el-button
              style="float:right;width:50px"
              icon="el-icon-caret-bottom"
              @click="changeToggleParam"
              class
            ></el-button>
          </el-col>
        </el-col>
        <el-col v-show="(tableComponents.length<=4?toggleParam:!toggleParam)&&tableComponents.length>4" style="width:400px;float:right;">
          <el-input
            class="crm-common-search"
            style="width:200px;border-right: 0;float:left;margin:1px"
            v-model="queryParam"
            :placeholder="searchField"
            size="small"
          ></el-input>
          <el-button
            icon="el-icon-search"
            @click="query()"
            class="el-button--primary crmonepage-searchButton"
            style="width:50px"
          >搜索</el-button>
          <el-button
            icon="iconfont icon-newlyAdded"
            @click="adfk()"
            class="crmonepage-searchButton"
            style="width:50px"
          >反馈</el-button>
        </el-col>
      </el-row>
    </div>
    <div
      id="searchFormGroup"
      v-show="tableComponents.length<=4?!toggleParam:toggleParam"
      class="filter-container filter-params"
      style="margin:0 0 1px 0"
      v-if="tableComponents.length > 0"
      ref="conHeight"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-row>
            <component
              v-for="comp in tableComponents.filter(o => o.isMust === false)"
              :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
              :validrule="comp.validrule"
              :key="comp.compKey"
              :codeField="comp.codeField"
              :textField="comp.textField"
              :popupsKey="comp.compKey"
              :is="comp.component"
              :code="formField[comp.codeField]"
              :text="formField[comp.textField]?formField[comp.textField]:''"
              @changeDropValue="getDropValue"
              @changeCode="getComponentCode"
              @focusCode="getFocusCode"
              @getCode="comp.changeCode"
              @emitCode="comp.emitCode"
              :isMul="comp.isMul"
              :isRequire="comp.isRequire"
              :span="comp.span || 6"
              :labelName="comp.labelName"
              :lookuptype="comp.lookuptype"
              :inputType="comp.inputType"
              :dateOptionsType="comp.dateOptionsType"
              :format="comp.format"
              :dateType="comp.dateType"
              :valueObject="curValueObject"
              :clearable="comp.clearable"
              :filterable="comp.filterable"
              :parentFileds="comp.parentFileds || ''"
              :changeCodeArray="comp.changeCodeArray"
              :extralParams="comp.extralParams"
              :disabled="comp.disabled"
            ></component>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- <div
      class="filter-container filter-title"
      ref="resultTitleHeight"
    >查询结果</div>-->

    

    <!-- <div  v-if="tableCols.length>10" class="crm-page-leftScrollButton" @click="leftScroll"><i class="el-icon-caret-left"></i></div>
    <div v-if="tableCols.length>10" class="crm-page-rightScrollButton" @click="rightScroll"><i class="el-icon-caret-right"></i></div> -->
    <div v-show="tableComponents.filter(o => o.type === 'popupsInput').length > 0">
      <component
        v-for="comp in tableComponents.filter(o => o.type === 'popupsInput')"
        :key="comp.popups.key"
        :codeField="comp.codeField"
        :popupsVisible="comp.popups.state"
        :comType="comp.popups.type"
        :is="comp.popups.component"
        :popupsKey="comp.compKey"
        :code="formField[comp.codeField]"
        @changeCode="getComponentCode"
        :valueObject="curValueObject"
      ></component>
    </div>
    <Edit
      ref="fkPage"
      :dynamicEditRowData="editRowData"
      :popupsVisible="editPopupsVisible"
      :key="editPopupsKey"
      :popupsState="editPopupsState"
      @close="close"/>
  </section>
</template>
<script>
import { oneTableTemplateMixins } from "@/components/mixins/oneTableTemplateMixinsCrm";
import { valueObjectMixins } from "@/components/mixins/valueObjectMixins";
import { contsMixins } from "@/components/mixins/contsMixins";
import Edit from '@/views/crm/KnowledgeBase/knowledgeSearchResult/edit'
export default {
  // 组件混入对象：{data[listQuery] methods[queryTable]}
  mixins: [oneTableTemplateMixins, valueObjectMixins, contsMixins],
  components: {
    Edit
  },
  props: {
    dynamicSearchField: { type: String, default: "" }, //placerholder
    dynamicSearchResult: { type: String, default: "" }, //placerholder
    dynamicSearchValue: { type: String, default: "" }, //高级搜索模糊查询值
    labelNameArray: {
      type: Array,
      default: function() {
        return [];
      }
    },
    dynamicButtonsRight: {
      type: Array,
      default: function() {
        return [];
      }
    },
    haveTable: { type: Boolean, default: true }
    //dynamicFormFields:{ type: Object, default: {} }
  },
  watch: {
    queryParam(value) {
      this.$parent.queryParam!=undefined?this.$parent.formField.queryParam= value:'';
    }
  },
  mounted(){
    document.getElementById('AppMain').style.overflowY='hidden'
  },
  data() {
    return {
      editPopupsKey: "",
      editPopupsState: "",
      editPopupsVisible: false,
      haveTable: this.haveTable,
      searchField: this.dynamicSearchField,
      searchResult: this.dynamicSearchResult,
      queryParam: this.dynamicSearchValue,
      tableButtonsRight: this.dynamicButtonsRight,
      //formField:this.dynamicFormFields,
      tableButton1: [
        {
          compKey: "btnKey10000",
          type: "",
          icon: "iconfont icon-search",
          size: "small",
          clickEvent: () => this.query(),
          text: "搜索"
        },
        {
          compKey: "btnKey10001",
          type: "",
          size: "small",
          icon: "iconfont icon-reset",
          clickEvent: () => this.resetEx(),
          text: "重置"
        },
        {
          compKey: "btnKey10002",
          type: "",
          icon: "iconfont icon-newlyAdded",
          size: "small",
          clickEvent: () => this.adfk(),
          text: "反馈"
        }
      ]
    };
  },
  methods: {
    adfk(){
      debugger
      var rowData = {};
      rowData["feedbackTitle"]=this.queryParam;
      this.editRowData = rowData
      this.editPopupsState = "edit";
      this.editPopupsVisible = true;
      this.editPopupsKey = this.$utils.generateId();
    },
    leftScroll() {
      if (this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft >= 200) {
        this.$refs.multipleTable.$refs.bodyWrapper.style.scrollBehavior='smooth'
        this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft=this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft - 200
        return;
      }
       if (this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft < 200&&this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft >= 0){
          this.$refs.multipleTable.$refs.bodyWrapper.style.scrollBehavior='smooth'
         this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft=0
          return;
       }
    },
    rightScroll() {
       this.$refs.multipleTable.$refs.bodyWrapper.style.scrollBehavior='smooth'
      this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft=this.$refs.multipleTable.$refs.bodyWrapper.scrollLeft + 200
      return;
    },
    // 下拉框联动

    getDropValue(val, txt, comName) {
      let that = this;
      that.$refs[comName][0].getData(val, txt, comName);
      that.$refs[comName][0].modelCode=''
    },
    getIcon(comp) {
      var text = comp.text;
      if (text.indexOf("新增") != -1) {
        comp.type = "";
        return "iconfont icon-newlyAdded";
      }
      if (text.indexOf("导出") != -1) {
        comp.type = "";
        return "iconfont icon-export";
      }
      if (text.indexOf("导入") != -1) {
        comp.type = "";
        return "iconfont icon-importTemplate";
      }
      if (text.indexOf("确认") != -1) {
        comp.type = "";
        return "iconfont  icon-confirm";
      }
    },
    query() {
      let that = this;
      if(this.queryParam)
      {
        this.$parent.$parent.$parent.queryParam=this.queryParam
      }
      else{
        this.$parent.$parent.$parent.queryParam=""
      }
      for (let key in that.formField) {
        if (that.formField[key] === " ") {
          that.formField[key] = undefined;
        }
      }
      if (this.tableButtonsRight.length > 0) {
        this.$parent.$parent.$parent.query()
        return;
      }
      this.queryTable(1);
    },
    resetEx() {
      let that = this;
      let patt = new RegExp(",");
      for (let key in that.$refs) {
        if (that.$refs[key][0] && that.$refs[key][0].codeField) {
          let flag = patt.test(that.$refs[key][0].codeField);
          if (flag) {
            that.$refs[key][0].modelCode = [];
          }
        }
      }
      this.reset();
    },
    changeToggleParam() {
      if(this.$parent.$parent.$parent.queryParam!=undefined)
      {
        this.$parent.$parent.$parent.queryParam=""
      }
      this.toggleParam = !this.toggleParam;
      if (this.toggleParam) {
        this.moreBtnIcon = "el-icon-minus";
      } else {
        this.moreBtnIcon = "el-icon-plus";
      }
      // 收缩时清空查询条件
      this.reset();
      this.queryParam=''
      this.setTableHeight();
    }
  }
};
</script>
<style scoped>
.crm-common-search .el-input__inner {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.link {
  color: #0077ff;
  text-decoration: underline;
}
.link:hover {
  cursor: pointer;
}
.crmonepage-searchButton{
  padding: 0;
    margin: 0;
    border-left: 0px;
    float:left;
    height: 29px;
    margin: 1px 0 1px -5px;
    border-radius: 0;
}
.crmonepage-hidden{
  display: none
}
.crmonepage-hello{
  -webkit-transition-duration: 500ms;
        -moz-transition-duration: 500ms;
        -ms-transition-duration: 500ms;
        -o-transition-duration: 500ms;
        transition-duration: 500ms;
}
</style>
